<template>
  <div class="my-box" @click="handleClick">
    <div class="my-top">
      <div class="top-con">
        <div class="con-img">
          <img
            style="width: 16px; height: 16px; margin-right: 2px"
            src="/static/project/seal.png"
          />
        </div>
        <div class="top-tit">
          {{ info.owner.name }}提交的{{ info.processDefName }}
        </div>
        <span class="top-btn">
          <span v-if="info.complete === 1" class="completed">已通过</span>
          <span v-if="info.complete === 2" class="incompleted">未通过</span>
          <span v-if="info.complete === 3" class="no-pass">未审批</span>
        </span>
      </div>
      <div class="top-icon">
        <image
          src="/static/icons/arrow-right.png"
          style="width: 16px; height: 16px; margin-right: 2px"
        />
      </div>
    </div>
    <div class="end-time">
      <div class="time-top">
        <van-icon name="underway-o" />
        <div class="time">
          {{ info.createTime }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAccessToken } from '@/utils/storage.js'

export default {
  name: 'TodoItem',
  props: {
    info: {
      type: Object,
      required: true,
    },
  },
  methods: {
    async handleClick() {
      const { instanceId, nodeId } = this.info
      uni.navigateTo({
        url: `/pages/webview/index?link=${encodeURIComponent(
          `${this.$env.WEBVIEW_URL}/mbApproval?instanceId=${instanceId}&nodeId=${nodeId}&token=${getAccessToken()}`,
        )}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.my-box {
  width: 92%;
  margin: 0 auto;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  margin-top: 10px;
  padding-top: 15px;
  padding-bottom: 5px;
  .my-top {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 93%;
    padding-bottom: 5px;
    .top-con {
      display: flex;
      align-items: center;
      .top-tit {
        color: #333;
        font-size: 14px;
        font-weight: 600;
      }
      .con-img {
        display: flex;
        align-items: center;
      }
      .top-btn {
        font-size: 12px;
        span {
          border-radius: 3px;
          padding: 0px 5px;
          margin-left: 10px;
        }
        .completed {
          color: #739eca;
          border: 1px solid #739eca;
          background: #f1f5f9;
        }
        .incompleted {
          background: #ffe5e5;
          border: 1px solid #ff0000;
          color: #ff0000;
        }
        .no-pass {
          color: #999;
          border: 1px solid #999;
          background: rgba(153, 153, 153, 0.1);
        }
      }
    }
    .top-icon {
      // width: 40%;
      color: #739eca;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .end-time {
    display: flex;
    padding: 10px 10px;
    font-size: 12px;
    justify-content: space-between;
    .time-top {
      display: flex;
      .time {
        padding-left: 5px;
      }
    }
    .time-bot {
      display: flex;
      align-items: center;
      color: #739eca;
      .bot-line {
        width: 1px;
        height: 12px;
        margin: 0px 10px;
        background: #ccc;
      }
    }
  }
}
</style>
